<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商城-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>
    <!-- 网站说明 -->
    <meta name="description"
        content="购物商城-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
    <!-- 关键字 -->
    <meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡" />
    <link rel="shortcut icon" href="favicon.ico">

</head>
<style>
    /* 样式部分 */
    @media screen and (max-width: 768px) {
        #page1 {
            display: none;
            /* 隐藏页面1 */
        }

        #page2 {
            display: block;
            /* 显示页面2 */
        }
    }
</style>


<body>

    <!-- 页面1 -->
    <div id="page1">
        <link rel="stylesheet" href="css/base.css">
        <link rel="stylesheet" href="css/commom.css">
        <link rel="stylesheet" href="css/index.css">
        <!-- 页面1 的内容 -->
        <!-- 导航模块 -->
        <section class="shortcut">
            <div class="w">
                <div class="fl">
                    <ul>
                        <li>欢迎您!&nbsp;</li>
                        <li>
                            <a href="register.html">请登录</a> &nbsp; <a href="register.html" class="style_red">免费注册</a>
                        </li>
                    </ul>
                </div>
                <div class="fr">
                    <ul>
                        <li>我的订单</li>
                        <li></li>
                        <li class="arrow-icon">我的</li>
                        <li></li>
                        <li>会员</li>
                        <li></li>
                        <li>企业采购</li>
                        <li></li>
                        <li class="arrow-icon">关注</li>
                        <li></li>
                        <li class="arrow-icon"><a
                                href="https://www.bilibili.com/video/BV1rb42187qA/?spm_id_from=333.999.0.0&vd_source=51af9bc52e3718588d4f1c8a07aa24af"
                                style="background-color: red; color: azure; border: 1px solid white;  border-radius: 10px; padding: 0 5px;">作业介绍</a>
                        </li>
                        <li></li>
                        <li class="arrow-icon"><a href="./TEAM/index.html"
                                style="background-color: red; color: azure; border: 1px solid white;  border-radius: 10px; padding: 0 5px;">小组作业</a>
                        </li>
                    </ul>
                </div>
            </div>
        </section>
        <!-- 头部模块 -->
        <header class="header w">
            <!-- logo模块 -->
            <!-- <div class="logo">
            <h1>
                <a href="index.html" title="商城">商城</a>
            </h1>
        </div> -->
            <!-- search搜索模块 -->
            <div class="search">
                <input type="search" placeholder="游戏笔记本">
                <button>搜索</button>
            </div>
            <!-- hotwords模块 -->
            <div class="hotwords">
                <a href="#" class="style_red">首发</a>
                <a href="#">亿元优惠</a>
                <a href="#">9.9元团购</a>
                <a href="#">美满99减30</a>
                <a href="#">办公用品</a>
                <a href="#">电脑</a>
                <a href="#">通信</a>
            </div>
            <!-- 购物车模块 -->
            <div class="shopcar">我的购物车
                <i class="count">8</i>
            </div>
        </header>
        <!-- nav模块 -->
        <nav class="nav">
            <div class="w">
                <div class="dropdown">
                    <div class="dt">全部商品分类</div>
                    <div class="dd">
                        <ul>
                            <li><a href="#">家用电器</a></li>
                            <li id="li1"><a href="list.html">手机</a>、 <a href="list.html">数码</a>、<a
                                    href="list.html">通信</a>
                            </li>
                            <li><a href="#">电脑、办公</a> </li>
                            <li><a href="#">家居、家具、家装、厨具</a> </li>
                            <li><a href="#">男装、女装、童装、内衣</a> </li>
                            <li><a href="#">个户化妆、清洁用品、宠物</a> </li>
                            <li><a href="#">鞋靴、箱包、珠宝、奢侈品</a> </li>
                            <li><a href="#">运动户外、钟表</a> </li>
                            <li><a href="#">汽车、汽车用品</a> </li>
                            <li><a href="#">母婴、玩具乐器</a> </li>
                            <li><a href="#">食品、酒类、生鲜、特产</a> </li>
                            <li><a href="#">医药保健</a> </li>
                            <li><a href="#">图书、音像、电子书</a> </li>
                            <li><a href="#">彩票、旅行、充值、票务</a> </li>
                            <li><a href="#">理财、众筹、白条、保险</a> </li>
                        </ul>
                    </div>
                </div>
                <div class="navitems">
                    <ul>
                        <li><a href="#">超市</a></li>
                        <li><a href="#">秒杀</a></li>
                        <li><a href="#">家电</a></li>
                        <li><a href="#">生鲜</a></li>
                        <li><a href="#">电脑数码</a></li>
                        <li><a href="#">会员</a></li>
                        <li><a href="#">进口好物</a></li>
                        <li><a href="#">便宜包邮</a></li>
                        <li><a href="#">拍卖</a></li>
                        <li><a href="#">五金城</a></li>
                    </ul>
                </div>
            </div>
        </nav>

        <!-- 首页 main start -->
        <div class="w">
            <div class="main">
                <div class="focus01">
                    <ul>
                        <li>
                            <img src="img/focus.jpg" alt="">
                        </li>
                    </ul>
                </div>
                <div class="focus02">
                    <a href="#"><img src="img/main02.png" alt=""></a>
                    <a href="#"><img src="img/main03.png" alt=""></a>
                    <a href="#"><img src="img/main04.jpg" alt=""></a>
                </div>
                <div class="newsflash">
                    <div class="news">
                        <div class="news-hd">
                            <h5>快报</h5>
                            <a href="#" class="more">更多</a>
                        </div>
                        <div class="news-bd">
                            <ul>
                                <li><a href="#"><strong>[特惠]</strong> 备战开学季 全民半价购数码</a></li>
                                <li><a href="#"><strong>[公告]</strong> 稳占家电网购六成份额</a></li>
                                <li><a href="#"><strong>[特惠]</strong> 百元中秋全品类礼券限量领</a></li>
                                <li><a href="#"><strong>[公告]</strong> 生鲜享阳澄湖大闸蟹</a></li>
                                <li><a href="#"><strong>[特惠]</strong> 每日享折扣品优品质游</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="lifeservice">
                        <ul>
                            <li>
                                <i></i>
                                <p>话费</p>
                            </li>
                            <li>
                                <i></i>
                                <p>机票</p>
                            </li>
                            <li>
                                <i></i>
                                <p>电影票</p>
                            </li>
                            <li>
                                <i></i>
                                <p>游戏</p>
                            </li>
                            <li>
                                <i></i>
                                <p>彩票</p>
                            </li>
                            <li>
                                <i></i>
                                <p>加油卡</p>
                            </li>
                            <li>
                                <i></i>
                                <p>酒店</p>
                            </li>
                            <li>
                                <i></i>
                                <p>火车票</p>
                            </li>
                            <li>
                                <i></i>
                                <p>众筹</p>
                            </li>
                            <li>
                                <i></i>
                                <p>理财</p>
                            </li>
                            <li>
                                <i></i>
                                <p>礼品</p>
                            </li>
                            <li>
                                <i></i>
                                <p>白条</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- main end -->
        <!-- 推荐star -->
        <div class="w recom">
            <div class="recom_hd">
                <div class="cutdown">每日推荐</div>
                <img src="img/clock.png" alt="">

            </div>
            <div class="recom_bd">
                <ul>
                    <li>
                        <a href="#"><img src="upload/魅族.png" alt="">
                            <div>
                                <p>Meizu魅族 21 12GB+256GB 魅族白 1.74mm极窄四等边直屏 骁龙8Gen3 2亿像素 80W超充 5G游戏学生拍照手机</p>
                            </div>
                        </a>

                    </li>
                    <li>
                        <a href="#"><img src="./update/gt.png" alt="">
                            <div>
                                <p>华为HUAWEI WATCH GT Runner 黑色硅胶表带 46mm表盘 华为手表 运动智能手表 精准定位 蓝牙通话 血氧检测</p>
                            </div>
                        </a>
                    </li>
                    <li><a href="#"><img src="upload/小米.png" alt="">
                            <div>
                                <p>
                                    小米(MI)Redmi Buds 4 活力版 白色 无线蓝牙耳机 28小时长续航 通话降噪 适用小米华为苹果手机
                                </p>
                            </div>
                    </li></a>
                    <li>
                        <a href="#"><img src="./update/4cc467aa6ae49c9f.jpg_png.png" alt="">
                            <div>
                                <p>
                                    超感稳连技术2.0、超感智能分配3.0、模块立体设计、6重用电安全保护
                                </p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#"><img src="./update/香槟.png" alt="">
                            <div>
                                <p>柏拉芝 配2香槟酒杯 意大利原瓶进口莫斯卡托0度无醇无酒精起泡酒葡萄酒 单支装（750ml）+2香槟杯</p>
                            </div>
                        </a>
                    </li>

                </ul>
            </div>
        </div>
        <!-- 猜你喜欢 -->
        <div class="yourlove w">
            <div class="yourlovehd">
                <span>猜你喜欢</span>
                <a href="#"><i>换一批</i></a>

            </div>
            <div class="yourlovebd">
                <ul>
                    <li>
                        <img src="img/recom01.jpg" alt="">
                        <div class="des">
                            <span>山西红富士苹果新鲜水果 当季现摘红富士冰糖心苹果整箱 75mm(含)-80mm(不含) 带箱9斤装</span>
                            <em>¥116.00</em>
                        </div>

                    </li>
                    <li>
                        <img src="img/recom02.jpg" alt="">
                        <div class="des">
                            <span>【爆款游戏鼠标】有线即插即用支持宏软件自定义
                                【有保障放心购】享365天只换不修
                                【旗舰上新推荐】有线无线蓝牙三模，宏软件自定义机械键盘</span>
                            <em>¥99.00</em>
                        </div>
                    </li>
                    <li><img src="img/recom03.jpg" alt="">
                        <div class="des">
                            <span>迪卡侬上衣男防风外套球户外加厚保暖运动衣服男款 </span>
                            <em>¥245.00</em>
                        </div>
                    </li>
                    <li><img src="img/recom04.jpg" alt="">
                        <div class="des">
                            <span>【美的冰箱*年终钜惠】百补重磅补贴，手慢无【一级智能双变频、大容量精细囤、立体循环风冷无霜】晒单领保鲜盒</span>
                            <em>¥2138.00</em>
                        </div>
                    </li>
                    <li><img src="img/recom05.jpg" alt="">
                        <div class="des">
                            <span>JEEP SPIRIT吉普冲锋衣夹克男秋冬外套加厚三合一户外运动服男装 卡其 2XL</span>
                            <em>¥249.00</em>
                        </div>
                    </li>
                    <li><img src="img/re06.jpg" alt="">
                        <div class="des">
                            <span>克洛斯威（CROSSWAY）羽毛球拍双拍儿童体育用品超值时尚套装对拍2支装羽毛球拍对拍 合金升级款/紫青2支-6个尼龙球</span>
                            <em>¥149.00</em>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 推荐end -->

        <!-- 底部模块 -->
        <footer class="footer1">
            <div class="wb">
                <div class="mod_service">
                    <ul>
                        <li>
                            <h5></h5>
                            <div class="service_txt">
                                <h4>正品保证</h4>
                                <p>正品保证,提供发展</p>
                            </div>
                        </li>
                        <li>
                            <h5></h5>
                            <div class="service_txt">
                                <h4>极速物流</h4>
                                <p>急速物流,急速送达</p>
                            </div>
                        </li>
                        <li>
                            <h5></h5>
                            <div class="service_txt">
                                <h4>无忧售后</h4>
                                <p>7天无理由退换货</p>
                            </div>
                        </li>
                        <li>
                            <h5></h5>
                            <div class="service_txt">
                                <h4>特色服务</h4>
                                <p>私人定制家电套餐</p>
                            </div>
                        </li>
                        <li>
                            <h5></h5>
                            <div class="service_txt">
                                <h4>帮助中心</h4>
                                <p>您的购物指南</p>
                            </div>
                        </li>

                    </ul>
                </div>
                <div class="mod_help">
                    <dl>
                        <dt>购物指南</dt>
                        <dd><a href="#">购物流程</a></dd>
                        <dd><a href="#">会员介绍</a></dd>
                        <dd><a href="#">生活旅行</a></dd>
                        <dd><a href="#">常见问题</a></dd>
                        <dd><a href="#">大家电</a></dd>
                        <dd><a href="#">联系客服</a></dd>
                    </dl>
                    <dl>
                        <dt>配送方式</dt>
                        <dd><a href="#">上门自提</a></dd>
                        <dd><a href="#">211限时达</a></dd>
                        <dd><a href="#">配送服务查询</a></dd>
                        <dd><a href="#">配送费收取标准</a></dd>
                        <dd><a href="#">海外配送</a></dd>

                    </dl>
                    <dl>
                        <dt>支付方式</dt>
                        <dd><a href="#">货到付款</a></dd>
                        <dd><a href="#">在线支付</a></dd>
                        <dd><a href="#">分期付款</a></dd>
                        <dd><a href="#">邮局汇款</a></dd>
                        <dd><a href="#">公司转账</a></dd>

                    </dl>
                    <dl>
                        <dt>售后服务</dt>
                        <dd><a href="#">售后政策</a></dd>
                        <dd><a href="#">价格保护</a></dd>
                        <dd><a href="#">退款说明</a></dd>
                        <dd><a href="#">返修/退换货</a></dd>
                        <dd><a href="#">取消订单</a></dd>
                    </dl>
                    <dl>
                        <dt>特色服务</dt>
                        <dd><a href="#">夺宝岛</a></dd>
                        <dd><a href="#">DIY装机</a></dd>
                        <dd><a href="#">延保服务</a></dd>
                        <dd><a href="#">品优购E卡</a></dd>
                        <dd><a href="#">品优购通信</a></dd>
                    </dl>
                    <dl>
                        <dt>帮助中心</dt>
                        <dd>
                            <img src="img/erweima.png" alt="">
                            客户端
                        </dd>
                    </dl>

                </div>
                <div class="mod_copyright">
                    <div class="links">
                        <a href="#">关于我们</a> | <a href="#">联系我们</a> | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 社区 |
                        公益 | English Site | Contact U
                    </div>
                    <div class="copyright">
                        地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编:100096 电话:400-618-4000 传真:010-82935100 邮箱: zhanghj+itcast.cn <br>
                        京ICP备08001421号京公网安备110108007702
                    </div>
                </div>
            </div>
        </footer>
    </div>

    <!-- 页面2 -->
    <div id="page2" style="display: none;">
        <link rel="stylesheet" href="./css/flex布局.css">
        <!-- 页面2 的内容 -->
        <div class="container">
            <!-- 页面头部 -->
            <div class="index-header">
                <i><img src="./img/iconfont/定位.png" alt=""></i>
                <span>当前门店：</span>
                <a href="#">财源滚滚店 ></a>
            </div>
            <!-- 搜索栏 -->
            <div class="index-search">
                <input type="text" placeholder="请输入用户名" />
                <div class="search-item">
                    <i><img src="./img/iconfont/更多.png" alt=""></i>
                    <p>快速核销</p>
                </div>
            </div>
            <!-- 广告轮播图 -->
            <div class="index-banner">
                <img src="./img/精选商场平台.jpeg" alt="">

                <ul>
                    <li>1</li>
                    <li>/</li>
                    <li>3</li>
                </ul>
            </div>
            <!-- 导航栏-->
            <div class="index-nav">
                <ul>
                    <li>
                        <a href="#">
                            <img src="./img/新品.png" alt="">
                            <p>新品专区</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/新品.png" alt="">
                            <p>新品专区</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/新品.png" alt="">
                            <p>新品专区</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/新品.png" alt="">
                            <p>新品专区</p>
                        </a>
                    </li>
                    <br />
                    <li>
                        <a href="#">
                            <img src="./img/新品.png" alt="">
                            <p>新品专区</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/新品.png" alt="">
                            <p>新品专区</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/新品.png" alt="">
                            <p>新品专区</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/新品.png" alt="">
                            <p>新品专区</p>
                        </a>
                    </li>
                </ul>
            </div>
            <!-- 秒杀 -->
            <div class="index-seckill">
                <div class="seckill-count">
                    <i><img src="./img/iconfont/限时秒杀.png" alt=""></i>
                    <span>限时秒杀</span>
                </div>
                <div class="seckill-time">
                    <ul>
                        <li>
                            <p>0:00</p>
                            <b>抢购中</b>
                        </li>
                        <li>
                            <p>10:00</p>
                            <b>抢购中</b>
                        </li>
                        <li>
                            <p>14:00</p>
                            <b>抢购中</b>
                        </li>
                    </ul>
                </div>
                <div class="seckill-column">
                    <div class="column-left">
                        <a href="#">
                            <img src="./img/iconfont/秘密礼物.png" alt="" />
                            <span>秒杀</span>
                        </a>
                    </div>
                    <div class="column-right">
                        <h5><a href="#">更多好物，尽情期待</a></h5>
                        <p>秒杀价</p>
                        <div class="column-list">
                            <i>￥</i>
                            <b>???</b>
                            <s>￥???</s>
                            <a href="#">立即抢购</a>
                        </div>
                    </div>

                </div>
            </div>
            <!-- 商品展示部分 -->
            <div class="index-main">
                <ul>
                    <li>
                        <a href="./html/flex布局_商品1.html" class="index-main-item">
                            <div class="more-img">
                                <img src="./update/小米.png" alt="">
                            </div>
                            <h4>优质物品</h4>
                            <p>尽情期待</p>
                            <div class="more-info">
                                <i>￥</i>
                                <b>???</b>
                                <s>￥???</s>
                            </div>
                        </a>
                        <i><img src="./img/购物车.png" alt=""></i>
                    </li>
                    <li>
                        <a href="./html/flex布局_商品1.html" class="index-main-item">
                            <div class="more-img">
                                <img src="./update/魅族.png" alt="">
                            </div>
                            <h4>优质物品</h4>
                            <p>尽情期待</p>
                            <div class="more-info">
                                <i>￥</i>
                                <b>???</b>
                                <s>￥???</s>
                            </div>
                        </a>
                        <i><img src="./img/购物车.png" alt=""></i>
                    </li>
                    <li>
                        <a href="../html/flex布局_商品1.html" class="index-main-item">
                            <div class="more-img">
                                <img src="./update/gt.png" alt="">
                            </div>
                            <h4>优质物品</h4>
                            <p>尽情期待</p>
                            <div class="more-info">
                                <i>￥</i>
                                <b>???</b>
                                <s>￥???</s>
                            </div>
                        </a>
                        <i><img src="./img/购物车.png" alt=""></i>
                    </li>
                    <li>
                        <a href="./html/flex布局_商品1.html" class="index-main-item">
                            <div class="more-img">
                                <img src="./update/4cc467aa6ae49c9f.jpg_png.png" alt="">
                            </div>
                            <h4>优质物品</h4>
                            <p>尽情期待</p>
                            <div class="more-info">
                                <i>￥</i>
                                <b>???</b>
                                <s>￥???</s>
                            </div>
                        </a>
                        <i><img src="./img/购物车.png" alt=""></i>
                        <p class="more-num">0</p>
                    </li>
                    <li>
                        <a href="./html/案例跟随鼠标的天使.html" class="index-main-item">
                            <div class="more-img">
                                <img src="./img/iconfont/盲盒.png" alt="">
                            </div>
                            <h4>优质物品</h4>
                            <p>尽情期待</p>
                            <div class="more-info">
                                <i>￥</i>
                                <b>???</b>
                                <s>￥???</s>
                            </div>
                        </a>
                        <i class="more-over"><img src="./img/购物车.png" alt=""></i>
                        <p class="more-not">待开发</p>
                    </li>
                </ul>
            </div>
            <!-- 页面底部-->
            <!-- 解决固定定位遮挡问题 -->
            <div class="footer-seat"></div>
            <div class="footer">
                <div class="footer-lists">
                    <ul>
                        <li class="selected">
                            <a href="./html/flex布局.html">
                                <i><img src="./img/iconfont/shouye.png" alt=""></i>
                                <p>首页</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i><img src="./img/iconfont/分类.png" alt=""></i>
                                <p>分类</p>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="gw">
                                <i><img src="./img/iconfont/购物车.png" alt=""></i>
                                <p>购物车</p>
                                <b>0</b>
                            </a>
                        </li>
                        <li>
                            <a href="./html/flex布局_my.html">
                                <i><img src="./img/iconfont/我的.png" alt=""></i>
                                <p>我的</p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>


        </div>

    </div>

    <script>
        // JavaScript 部分，监听窗口大小变化并切换页面
        window.addEventListener('resize', function () {
            if (window.innerWidth <= 768) { // 如果浏览器窗口宽度小于等于 768px
                document.getElementById('page1').style.display = 'none'; // 隐藏页面1
                document.getElementById('page2').style.display = 'block'; // 显示页面2
            } else { // 如果窗口宽度大于 768px
                document.getElementById('page1').style.display = 'block'; // 显示页面1
                document.getElementById('page2').style.display = 'none'; // 隐藏页面2
            }
        });
    </script>
</body>

</html>